<template>
    <div class="pagination">
        <el-pagination :current-page="pageNum" :page-size="pageSize" :page-sizes="[4, 10, 20, 50]"
            layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="(size: number) => pageSize = size" @current-change="(num: number) => pageNum = num" />
        <!-- size-change 点击每页条数从而改变每页的数据数量   current-change 点击页码值切换对应数据-->
    </div>
</template>

<script lang='ts' setup>
// 接收父组件传的双向绑定的数据 pageNum 和 pageSize 
const pageNum = defineModel('pageNum', { required: true });
const pageSize = defineModel('pageSize', { required: true })
// 接收父组件传过来的变量 total
defineProps(['total'])
</script>

<style lang='scss' scoped>
.pagination {
    display: flex;
    flex-direction: row-reverse; //倒叙
    width: 100px;
    height: 1px;
    margin-left: 800px;
}
</style>